/**
* 全局样式
*/
/**
 原生css变量的定义（浏览器默认支持）=》类似less/sass定义变量
 语法：
 1. 定义：--css变量名:css变量值
 2. 使用：var(--css变量名)
 作用域：
 1. 局部变量 =》 .类名 {    }
 2. 全局变量 =》 :root {    }
*/

// 1. 定义全局css变量
:root {
  --meng-color: pink;
  --meng-bd: 2px solid red;
}

.meng-box {
  // 2. 定义局部css变量
  --meng-test: orange;

  color: var(--meng-color);
  border: var(--meng-bd);
  padding:20px;
  background: var(--meng-test);
}

// :root:root权重更高，会覆盖一个:root下定义的同名全局变量
:root:root {
  // 1. 项目定义变量(自己定义的)
  --cp-primary: #16c2a3;
  --cp-plain: #eaf8f6;
  --cp-orange: #fca21c;
  --cp-text1: #121826;
  --cp-text2: #3c3e42;
  --cp-text3: #6f6f6f;
  --cp-tag: #848484;
  --cp-dark: #979797;
  --cp-tip: #c3c3c5;
  --cp-disable: #d9dbde;
  --cp-line: #ededed;
  --cp-bg: #f6f7f9;
  --cp-price: #eb5757;
  // 2. == 覆盖vant主体色 ==
  --van-primary-color: var(--cp-primary);
  // == vant组件变量 ==
  // 单元格上下间距
  --van-cell-vertical-padding: 14px;
  // 复选框大小
  --van-checkbox-size: 14px;
  // 默认按钮文字大小
  --van-button-normal-font-size: 16px;
}

// 全局样式（重制默认样式，保持统一）
body {
  font-size: 14px;
  color: var(--cp-text1);
}
a {
  color: var(--cp-text2);
}
h1,h2,h3,h4,h5,h6,p,ul,ol {
  margin: 0;
  padding: 0;
}

// 全局覆盖van-tab样式（举例子，使用类名覆盖组件样式）
.van-tabs {
  .van-tabs__nav {
    padding: 0 0 15px 0;
  }
  .van-tabs__line {
    width: 20px;
    background-color: var(--cp-primary);
  }
  .van-tab {
    padding: 0 15px;
  }
}
